<script type="text/javascript">
	$(document).ready(function() {
		$('th#select_all input:checkbox').click(function(){
			//alert('checked');
			if(this.checked){
				$('input:checkbox').attr('checked','checked');
				$('#mass-action').show();
			}else{
				$('input:checkbox').removeAttr('checked');
				$('#mass-action').hide();
			}
		});
		$('input:checkbox').not('th#select_all input:checkbox').click(function(){
			countChecked();
		});
		
		countChecked();	
		$('td').hover(function(){
			$(this).find('div.menu-hover').show();
		},function(){
			$(this).find('div.menu-hover').hide();
		});
		
		$('#addModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
		$('#editModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
		$('#deleteModal').on('hidden', function() {
			$(this).data('modal').$element.removeData();
		});
		$("a[rel=popover]")
			.popover({
				offset: 10
			})
			.click(function(e) {
				e.preventDefault()
			});
	});
	function countChecked(){
		count_checked = $('input:checked').not('th#select_all input:checkbox').length;
		if(count_checked >= 1){
			$('#mass-action').show();
		}else{
			$('th#select_all input:checkbox').removeAttr('checked');
			$('#mass-action').hide();
		}
	}
</script>
<div class="container">	
	<div class="page-header">
	  <h2>
		Index
		<small>
			<a class="btn pull-right dropdown-toggle" href='#' data-toggle="dropdown"><i class="icon-filter"></i></a>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
				<li><a href="#">Filter 1</a></li>
				<li><a href="#">Filter 2</a></li>
				<li><a href="#">Filter 3</a></li>
				<li class="divider"></li>
				<li><a href="#">Other Filter</a></li>
			</ul>
			<span class="pull-right">&nbsp;</span>
			<form class="form-inline pull-right">
			<input type="text" placeholder="Text input" class='pull-right'>
			</form>
		</small>
		</h2>	  
	</div>
	<?php echo $this->Session->flash('flash', array('element' => $this->Session->read('status')));?>
	<div class="btn-toolbar pull-left" style="margin: 0;display:none;" id='mass-action'>
		<div class="btn-group">
			<a class="btn dropdown-toggle" data-toggle="dropdown" href="#" data-toggle="dropdown" >
				Action
				<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
			</ul>
		</div>
	</div>
	<div class="btn-toolbar pull-right" style="margin: 0;">
		<div class="btn-group">
			<button class="btn">Filters  <i class="icon-resize-small"></i></button>
		</div>
		<div class="btn-group">
			<button class="btn">Bots  <i class="icon-resize-full"></i></button>
		</div>
		<div class="btn-group">
			<a data-remote="/tests/add" role="button" class="btn btn-danger" id='add' data-toggle="modal" data-target="#addModal" data-cache='false'>New Object</a>
		</div>
	</div><br /><br />
	<div>
	<table class="table table-bordered table-striped">
		<thead>
			<tr>	 	
				<th id='select_all'><input type="checkbox"></th>
				<th>No</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr> 	 	
				<td><input type="checkbox"></td>
				<td>1
					<div class="dropdown pull-right menu-hover" style='display:none;'>
						<a class="dropdown-toggle icon-chevron-down pull-right detail" data-toggle="dropdown" href="#" data-placement="right"></a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<li><a href="/tests/view">View</a></li>
							<li><a data-remote="/tests/edit" role="button" class="" data-toggle="modal" data-target="#editModal" data-cache='false'>Edit</a></li>
							<li><a data-remote="/tests/deleteConfirm" role="button" class="" data-toggle="modal" data-target="#deleteModal" data-cache='false'>Delete</a></li>
						</ul>
					</div>
				</td>
				<td>
					<?php
						$html = "<div class='pull-left'><img src='http://placehold.it/32x32' class='img-circle'></div>";
						$html .= "<div class='pull-right'>yuana@primagain.com<br />";
						$html .= "  1234567890<br /></div>";
					?>
					<a class="" data-html=true data-content="<?php echo $html;?>" data-placement="right" rel="popover" href="#" data-original-title="Larry">Larry</a>
				</td>
				<td>Otto</td>
				<td>@mdo</td>
			</tr>
			<tr> 	 	
				<td><input type="checkbox"></td>
				<td>2
					<div class="dropdown pull-right menu-hover" style='display:none;'>
						<a class="dropdown-toggle icon-chevron-down pull-right" data-toggle="dropdown" href="#" data-placement="right"></a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<li><a href="/tests/view">View</a></li>
							<li><a data-remote="/tests/edit" role="button" class="" data-toggle="modal" data-target="#editModal" data-cache='false'>Edit</a></li>
							<li><a data-remote="/tests/deleteConfirm" role="button" class="" data-toggle="modal" data-target="#deleteModal" data-cache='false'>Delete</a></li>
						</ul>
					</div>
				</td>
				<td>
					<?php
						$html = "<div class='pull-left'><img src='http://placehold.it/32x32' class='img-circle'></div>";
						$html .= "<div class='pull-right'>yuana@primagain.com<br />";
						$html .= "  1234567890<br /></div>";
					?>
					<a class="" data-html=true data-content="<?php echo $html;?>" data-placement="right" rel="popover" href="#" data-original-title="Larry">Larry</a>
				</td>
				<td>Thornton</td>
				<td>@fat</td>
			</tr>
			<tr> 	 	
				<td><input type="checkbox"></td>
				<td>3
					<div class="dropdown pull-right menu-hover" style='display:none;'>
						<a class="dropdown-toggle icon-chevron-down pull-right" data-toggle="dropdown" href="#" data-placement="right"></a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<li><a href="/tests/view">View</a></li>
							<li><a data-remote="/tests/edit" role="button" class="" data-toggle="modal" data-target="#editModal" data-cache='false'>Edit</a></li>
							<li><a data-remote="/tests/deleteConfirm" role="button" class="" data-toggle="modal" data-target="#deleteModal" data-cache='false'>Delete</a></li>
						</ul>
					</div></td>
				<td>
					<?php
						$html = "<div class='pull-left'><img src='http://placehold.it/32x32' class='img-circle'></div>";
						$html .= "<div class='pull-right'>yuana@primagain.com<br />";
						$html .= "  1234567890<br /></div>";
					?>
					<a class="" data-html=true data-content="<?php echo $html;?>" data-placement="right" rel="popover" href="#" data-original-title="Larry">Larry</a>
				</td>
				<td>Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
    </table>
    
    <div class="pagination pagination-centered">
	  <ul>
		<li><a href="#">Prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">Next</a></li>
	  </ul>
	</div>
	</div>
</div>
<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
	<div class="modal-body"></div>
</div>
